<template>
    <div class="choice-phamy">
        <input v-model="choiceObj.label" placeholder="请点击选择" readonly="readonly" class="input" @focus="focus"/>
        <dialogs
        :visible="visible"
        :title="title"
        width="700px"
        hideButton
        >
            <search-form :searchArray="searchArray" :searchObj="searchObj" ></search-form>
            <elTable :formData="formData" :highlight="true" @selection-change="selectChange">
                <el-table-column prop="name" label="选择" width="50px" >
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.checked"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="终端客户名称" ></el-table-column>
                <el-table-column prop="area" label="所属区域" ></el-table-column>
                <el-table-column prop="phone" label="手机号码" ></el-table-column>
                <el-table-column prop="account" label="登录名" >
                    <template slot-scope="scope">
                        {{scope.row.createTime && $normalTime(scope.row.createTime)}}
                    </template>
                </el-table-column>
            </elTable>
        </dialogs>
    </div>
</template>
<script>
import elTable from "@/components/xForm/elTable"
export default {
    name: 'choicePhamy',
    components: {
        elTable
    },
    props: {
        shopType: {
            type: Number,
            default () {
                return 0
            }  
        },
        choiceObj: {
            type: Object,
            default () {
                return {
                    label: '',
                    value: ''
                }
            }
        },
        mode: {
            event: 'input',
            prop: 'value'
        },
        title: {
            type: String,
            default () {
                return '选择公司'
            }
        }
    },
    data () {
        return {
            searchObj: {
                name: '',
                user: '',
                phone: '',
                account: ''
            },
            formData: {
                currentPage: 1,
                pageSize: 5,
                total: 3,
                data: [
                    {
                        id: '1',
                        name: '老百姓大药房1',
                        area: '浙江省-杭州市-西湖区',
                        phone: '12345678901',
                        account: 'dutall888'
                    },
                    {
                        id: '2',
                        name: '老百姓大药房2',
                        area: '浙江省-杭州市-西湖区',
                        phone: '12345678901',
                        account: 'dutall888'
                    },
                    {
                        id: '3',
                        name: '老百姓大药房3',
                        area: '浙江省-杭州市-西湖区',
                        phone: '12345678901',
                        account: 'dutall888'
                    }
                ]
            },
            searchArray: [
                {
                    type: 'input',
                    value: '',
                    label: '终端客户名称',
                    placeholder: '请输入终端客户名称',
                    key: 'name',
                    checked: false
                },
                {
                    type: 'input',
                    value: '',
                    label: '手机号',
                    placeholder: '请输入手机号',
                    key: 'phone',
                    checked: false
                },
                {
                    type: 'input',
                    value: '',
                    label: '登陆名',
                    placeholder: '请输入登陆名',
                    key: 'user',
                    checked: false
                }
            ],
            visible: {
                show: false
            },
            currentItem: {}
        }
    },
    methods: {
        clear () {
            this.choiceObj.label = ''
        },
        selectChange (val) {
            this.currentItem = val
            let {formData: {data}} = this
            data.forEach(r => {
                if (r.id == val.id) {
                    r.checked = true
                } else {
                    r.checked = false
                }
            })
            this.$set(this.formData, 'data', data)
            this.choiceObj.label= val.name
            this.$emit('choicePhamy', val)
            setTimeout(() => {
                this.visible.show = false
            }, 1000)
        },
        focus () {
            this.visible.show = true
        },
        getList(status = true) {
            if (!status) this.formData.currentPage = 1
            const {searchObj, formData: {currentPage, pageSize}} = this
            this.$loading(true)
            let param = {}
            param = {
                currentPage,
                pageSize,
                shopType: this.shopType,
                status: 2
            }
            for (let k in searchObj) {
                if (searchObj[k] !== '') {
                    param[k] = searchObj[k]
                }
            }
            this.$loading(true)
            this.$api.userManage.getCompanyList(param).then(r => {
                this.formData.data = r.data && r.data.list || []
                this.formData.total = r.data && r.data.total || 0
            }).finally(() => {
                this.$loading(false)
            })
        },
    },
    watch: {
        'visible.show' (val) {
            if (!val) {
                this.currentItem = {}
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.choice-phamy {
    display: inline-block;
    .input {
        cursor: pointer;
    }
}
</style>